<template>
  <!-- 文章类别 Begin -->
  <div>
    <div class="row-title flex flex-items-center flex-justify-center m-b-40px w-100%">
      <div
        class="col-title capitalize text-center text-18px text-#000 dark:text-#D8D8D8 font-700 tracking-1px"
        style="font-family: 'Open Sans', sans-serif"
      >
        Categories
      </div>
    </div>

    <div class="w-100% m-b-8px border-b-1px border-b-dashed border-b-#EAEAEA"></div>
    <div class="m-b-28px flex flex-col w-100% max-h-343px overflow-y-scroll">
      <div
        v-if="categoryList.length > 0"
        v-for="item in categoryList"
        :key="item.categoryId"
        class="w-100% flex flex-justify-between p-b-8px m-b-8px border-b-1px border-b-dashed border-b-#EAEAEA"
      >
        <div 
          class="capitalize text-#000 dark:text-#D8D8D8 text-16px hover:text-[--el-color-primary] transition-all duration-600 transition-ease" 
          @click="handleArticleCategory(item.categoryId)"
        >
          {{ item.categoryName.split("-")[0] }}
        </div>
        <div
          class="text-#000 dark:text-#D8D8D8 text-center text-13px min-w-30px h-30px line-height-30px rounded-full border-1px border-solid border-#EAEAEA hover:border-[--el-color-primary] transition-all duration-600 transition-ease"
          @click="handleArticleCategory(item.categoryId)"
        >
          {{ item.categoryName.split("-")[1] }}
        </div>
      </div>
      <!-- 骨架屏 Begin -->
      <div v-else>
        <el-skeleton animated>
          <template #template>
            <el-skeleton-item class="w-100% h-36px m-b-5px" />
            <el-skeleton-item class="w-100% h-36px m-b-5px" />
            <el-skeleton-item class="w-100% h-36px m-b-5px" />
            <el-skeleton-item class="w-100% h-36px m-b-5px" />
            <el-skeleton-item class="w-100% h-36px" />
          </template>
        </el-skeleton>  
      </div>
      <!-- 骨架屏 End --> 
    </div>
  </div>
  <!-- 文章类别 End -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { koiMsgWarning, koiNoticeError } from "@/utils/koi.ts";
import { listCategory } from "@/api/blog/category/index.ts";

const categoryList = ref<any>([]);

onMounted(() => {
  handleCategoryData();
});

/** 获取文章类别数据 */
const handleCategoryData = async () => {
  try {
    categoryList.value = [];
    const res: any = await listCategory("categoryNumber");
    console.log("文章类别数据->", res.data.categoryList);
    categoryList.value = res.data.categoryList;
  } catch (error) {
    console.log(error);
    koiNoticeError("数据查询失败，请刷新重试🌻");
  }
};

/** 跳转文章 */
const handleArticleCategory = (articleId: any) => {
  if (articleId) {
    console.log("类别ID->", articleId);
    window.open(`/article/full/${articleId}/category`, "_blank");
  } else {
    koiMsgWarning("未获取文章参数，请刷新页面重试");
  }
};
</script>

<style scoped></style>
